<template>
	<view class="container">
		<view class="content">
			<view class="card-area">
				<view class="card-m">
					<view class="commission">+19856.00</view>
				</view>
				<view class="indicator-box">
					<view class="indicator"><text>战队人数</text></view>
					<view class="point"></view>
					<view class="triangle"></view>
				</view>
			</view>
			<view class="levelList-area">
				<view class="title">战队分级</view>
				<view class="levelList-flex">
					<view class="level-item">
						<view class="members-icon-1"><image src="../../static/images/members-icon-1.png" mode=""></image></view>
						<view class="members-icon-2"><image src="../../static/images/members-icon-2.png" mode=""></view>
					</view>
					<view class="level-item">
						<view>一级</view>
						<view class="green-F fz21 transformOrigin5050">0人</view>
					</view>
					<view class="level-item">
						<view>二级</view>
						<view class="green-F fz21 transformOrigin5050">0人</view>
					</view>
					<view class="level-item">
						<view>三级</view>
						<view class="green-F fz21 transformOrigin5050">0人</view>
					</view>
				</view>
				<view class="levelList-flex">
					<view class="level-item">
						<view>四级</view>
						<view class="green-F fz21 transformOrigin5050">0人</view>
					</view>
					<view class="level-item">
						<view>五级</view>
						<view class="green-F fz21 transformOrigin5050">0人</view>
					</view>
					<view class="level-item">
						<view>六级</view>
						<view class="green-F fz21 transformOrigin5050">0人</view>
					</view>
					<view class="level-item">
						<view>七级</view>
						<view class="green-F fz21 transformOrigin5050">0人</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar-diy :isIndex="pageIndex" :isInner="true"></tabbar-diy>
	</view>
</template>

<script>
	let _self;
	import tabbarDiy from '../../components/tabbar-diy.vue'
	export default {
		data() {
			return {
				pageIndex: 3,
				today: 0,
				cumul: 0,
				personNum: 0,
				level: '七',
				levelsList: [],
				levelsLists: [
					{name: '一', val: 0},
					{name: '二', val: 0},
					{name: '三', val: 0},
					{name: '四', val: 0},
					{name: '五', val: 0},
					{name: '六', val: 0},
					{name: '七', val: 0}
				],
			}
		},
		components:{
			tabbarDiy
		},
		onShow(){
			console.log(11)
		},
		onLoad() {
			_self = this;
		},
		methods: {
			checkLevel(name, index){
				this.showDetail = true;
				this.level = name;
				// this.levelsList 服务器请求
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		color: #FFFFFF;	
		padding: 20rpx 0 120rpx;
	}
	.title{
		font-size: 31rpx;
		text-align: center;
	}
	.card-area{
		width: 686rpx;
		height: 251rpx;
		margin: 0 auto;
		background: url(../../static/images/commission-cardBg.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 110rpx;
		box-sizing: border-box;
		position: relative;
		
		.card-m{
			font-size: 24rpx;
			text-align: center;
			
			.commission{
				font-family: 'fzyt_GBK';//字体在App.vue文件中引入
				font-weight: bold;
				font-size: 50rpx;
				background: linear-gradient(to bottom, #7190FC 0%, #00E4DD 35%, #33D6FE 100%);
				background-clip: text;
				color: transparent;
				margin-bottom: 8rpx;
			}
		}
		.indicator-box{
			position: absolute;
			top: 58rpx;
			left: 94rpx;
			width: 140rpx;
		}
		.indicator{
			width: 140rpx;
			height: 42rpx;
			background-color: #7190FC;
			border-radius: 19rpx;
			text-align: center;
			line-height: 42rpx;
			
			text{
				font-size: 24rpx;
				display: inline-block;
				transform: scale(0.8);
			}
		}
		.triangle{
			width: 0rpx;
			height: 0rpx;
			border-top: 9rpx solid rgba($color: #7190FC, $alpha: 1);
			border-left: 10rpx solid rgba($color: #000000, $alpha: 0);
			border-right: 10rpx solid rgba($color: #000000, $alpha: 0);
			border-bottom: 9rpx solid rgba($color: #000000, $alpha: 0);
			position: absolute;
			top: 42rpx;
			left: 60rpx;
		}
		.point{
			width: 14rpx;
			height: 14rpx;
			border-radius: 50%;
			background-color: #0DD4BB;
			position: relative;
			top: 55rpx;
			left: 63rpx;
		}
	}

	.levelList-area{
		width: 686rpx;
		height: 788rpx;
		padding: 43rpx 34rpx 0;
		box-sizing: border-box;
		border-radius: 8rpx;
		background-color: #202A33;
		margin: 26rpx auto 0;
		font-size: 25rpx;
		
		.title{
			font-size: 29rpx;
			margin: 0 auto 35rpx;
		}
		.title::after{
			content: '';
			display: inline-block;
			width: 618rpx;
			height: 4rpx;
			background: url(../../static/images/commission-list-head.png) no-repeat;
			background-size: 100% 100%;
		}
		.levelList-flex{
			display: flex;
			justify-content: space-between;
		}
		.level-item{
			line-height: 56rpx;
			text-align: center;
			margin-bottom: 70rpx;
		}
		.members-icon-1{
			height: 56rpx;
			
			image{
				width: 44rpx;
				height: 33rpx;
			}
		}
		.members-icon-2{
			height: 56rpx;
			
			image{
				width: 19rpx;
				height: 18rpx;
			}
		}
	}
	
</style>
